今天要接續昨天的進度，要來使用CSS屬性製作關鍵影格動畫

(一)使用CSS屬性製作關鍵影格動畫

1.變形元素的屬性
transform:~;:可以旋轉、縮放、傾斜、移動元素，在值指定要讓元素如何變形

2.設定變形元素的屬性
transform-origin:~;:這個屬性是設定transform變形時的原點位置，在值輸入代表位置的關鍵字
或數值

(二)設定關鍵影格動畫

利用「keyframes animation 名稱」的方式即可設定關鍵影格，在此加上了名稱「ScrollAnimation」，並建立出0%(起點)、50%、50.1%、100%(終點)的關鍵影格，分別定義了四個狀態。

@keyframes scrollAnimation {  加上任意的動畫名稱
0% {
 transform: scaleY(0);     在top設原點
 transform-origin: top;
 }
50% {
 transform: scaleY(1);     線條由上往下延伸，動畫進行到一半(50%)時，Ｙ軸的大小變成1倍(=等倍)
 transform-origin: top;
 }
50.1% {
 transform: scaleY(1);     原點維持top，就會由下往上回到原來的位置，因此這裡將原點設定為bottom
 transform-origin: bottom;
 }
100% {
 transform: scaleY(1);     線條由上往下消失
 transform-origin: bottom;
 }
}

(三)套用關鍵影格動畫

套用動畫效果的相關屬性
1.animation-name:~;:這是設定套用效果的動畫名稱之屬性，在值輸入動畫名稱。
2.animation-duration:~;:這是設定效果所需時間的屬性，在值輸入秒數或毫秒數。
3.animation-timimg-function:~;:這是設定動畫變化方式的屬性，在值輸入關鍵字或函數型值。
4.animation-iteration-count:~;:這是設定動畫執行次數的屬性，在值輸入infinite(無限迴圈)或數值(次數)。

今天先做到這裡明天再繼續！